<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	.div-date-picker {
		position: relative;
	}
	#date-picker {
		width: 148px;
		padding-left: 30px;
	}
	.div-date-picker .fa-calendar{
		position: absolute;
		left: 8px;
		top: 9px;
	}
	#date-picker2 {
		width: 148px;
		padding-left: 30px;
	}
	.div-date-picker .fa-calendar{
		position: absolute;
		left: 8px;
		top: 9px;
	}
	.work-div {
		position: relative;
	}
	#work-calendar {
		width: 210px;
		padding-left: 30px;
	}
	.fa-calendar{
		position: absolute;
		left: 8px;
		top: 9px;
	}
	.total {
		color: red;
		font-size: 1.4rem;
		margin: 10px;
	}
</style>
<div class="page-header">
	<h1>
		卡号激活记录
		<a href="javascript:;" class="btn btn-info a-custom hide" id="export" target="_blank">
			<i class="ace-icon fa fa-download"></i> 导出数据
		</a>
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<div class="div-search">
								<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="student-name" placeholder="搜索学生名称..." autocomplete="off">
								<span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
								<button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
									<i class="ace-icon fa fa-search nav-search-icon white"></i>
								</button>
							</div>
						</div>
					</div>
					<!-- 管理员权限 -->
					<?php if($rmxUser['user_type'] == USER_TYPE_SCHOOL): ?>
						<div class="form-inline keyword-search-div" id="div-grade">
							<label class="keyword-search-label">年级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-grade active" data-id="0">全部</a>
								<?php if(isset($gradeList)): ?>
									<?php foreach($gradeList as $grade): ?>
										<a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-id="<?=$grade['id']?>"><?=$grade['grade_name']?></a>
									<?php endforeach; ?>
								<?php endif ?>
							</div>
						</div>
						<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">行政班&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class active" data-id="0">全部</a>
							</div>
						</div>
					<?php else: ?>	
					<!-- 教师权限 -->
					<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">班级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box div-classes">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-class active" data-id="0">全部</a>
								<?php foreach($rmxUser['classArr'] as $class): ?>
									<a href="javascript:;" class="keyword-search-keyword keyword-search-class" data-id="<?=$class['id']?>"><?=$class['name']?></a>
								<?php endforeach; ?>
							</div>
						</div>
					<?php endif ?>
					<div class="form-inline keyword-search-div" id="div-way">
                        <label class="keyword-search-label">激活途径</label>
                        <div class="keyword-search-box">
                            <a href="javascript:;" class="keyword-search-keyword keyword-search-grade active" data-value="0">全部</a>
                            <a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-value="1">微信支付</a>
							<a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-value="2">人工支付</a>
                        </div>
                    </div>
					<div class="form-inline keyword-search-div">
                        <label class="keyword-search-label" style="padding-top:5px;">支付时间&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div class="header-box">
                            <div class="work-div">
								<input type="text" id="work-calendar" readonly>
								<i class="fa fa-calendar"></i>
                            </div>
                        </div>
                    </div>
					<!-- <div class="form-inline keyword-search-div" id="div-createtime">
						<label class="keyword-search-label">时间区间</label>
						<div class="keyword-search-box">
							<div class="div-date-picker">
								<input class="form-control" type="text" id="date-picker" name="begindate" value=""/>
								<i class="fa fa-calendar"></i>
							</div>
							&nbsp;
							-
							&nbsp;
							<div class="div-date-picker2">
								<input class="form-control" type="text" id="date-picker2" name="enddate" value=""/>
								<i class="fa fa-calendar"></i>
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
	</div>
</div>

<div class="col-xs-12">
	<table id="dynamic-table" class="table table-striped table-bordered table-hover mt10" style="visibility:hidden;">
	<!-- <table id="dynamic-table" class="table table-striped table-bordered table-hover mt10"> -->
		<thead>
			<tr>
				<th>订单号</th>
				<th>学生姓名</th>
				<th>所属班级</th>
				<th>学号</th>
				<th>收费项</th>
				<th>价格（元）</th>
				<th>激活方式</th>
				<th>激活途径</th>
				<th>支付时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div class="total hide">
		合计：<span><?= $total ?></span>元
	</div>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script src="<?= $staticAdminUrl ?>assets/laydate/laydate.js"></script>
<script type="text/javascript">
	$(function(){
		var schoolId = 0;
		// 班级数据
		var normalClassJson = <?= $gradeNormalClassList ?>;
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('school/get_charge_pay_list')?>',
			"columns": [
				{"data": "out_trade_no"},
				{"data": "realname"},
				{"data": "class_name"},
				{"data": "username"},
				{"data": "name"},
				{"data": "price"},
				{"data": "active"},
				{"data": "pay_way"},
				{"data": "paytime"}
			]
		});
		// 密码提示
		$(".row").css("visibility", "hidden"); // 页码
		// 没加ready会导致弹窗无法居中
		layer.ready(function(){
			layer.prompt(
				{title: '请输入密码', formType: 1, btn:['确认']}, function(input, index){
				if(input == 'zhishi123456') {
					$("#dynamic-table").css("visibility", "visible");
					$(".row").css("visibility", "visible");
					$(".total").removeClass("hide");
					$("#export").removeClass("hide");
				} else {
					layer.confirm("密码错误，刷新重试");
				}
				layer.close(index);
			});
		})
		
		// 年级班级联动
		$("#data-search-grade").change(function(){
			var gradeId = $(this).val();
			var classSelect = $("#data-search-class");
			var getUrl = "<?=admin_url('school/get_class_list')?>/" + gradeId;
			ajax_get(getUrl, {hideLoading: true}, function(res){
				var optionHtml = "";
				classSelect.html('<option value="">全部班级</option>');
				for(var i in res.data) {
					var classData = res.data[i];
					if(classData.class_type == '<?=CLASSES_TYPE_NORMAL?>') classSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
				}
			})
		})
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 如果是点击年级
			if($(this).hasClass("keyword-search-grade")) {
				// 先清空班级列表
				$(".keyword-search-normal-class:gt(0)").remove();
				// 获取班级列表
				var normalClassList = normalClassJson[id];
				for(var i in normalClassList) $(".keyword-search-normal-class:first").parent().append('<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class" data-id="'+ normalClassList[i].id +'">'+ normalClassList[i].name +'</a>');
				search(table);
			} else {
				search(table);
			}
		});
        //执行一个laydate实例
		var chooseDate = getNowDate();
		var today = getNowDate();
		//默认设置作业时间区间开始为前14天
		var dayBefore = getBeforeSevenDate();
        var rangeDate = dayBefore + ' - ' + today;
        // var rangeDateInit = '0100-01-01' + ' - ' + today;
		//作业统计的时间选择器
		laydate.render({
			elem: '#work-calendar', //指定元素
			// value: rangeDateInit,
			value: '',
			range: true,
			max: today,
			btns: ['confirm'],
			done: function(value) {
				var arr = value.split(' - ');
				// console.log(arr);return;
				var begindate = arr[0];
				var enddate = arr[1];
				var dayCount = getDaysBetween(begindate, enddate);
				// if(dayCount > 30) {
				// 	layer.msg('范围不能大于30天', {icon: 2});
				// 	return;
				// }
				// var gradeId = $("#div-grade .active").data("id");
				// var classId = $("#div-normal-class .active").data("id");
				// var rangeDate = $("#work-calendar").val();
				// // 筛选班级
				// table.setAjaxData({
				// 	"classId": classId,
				// 	"gradeId": gradeId,
				// 	"begindate": begindate,
                //     "enddate": enddate
				// });

				// 加延迟，筛选的日期才会生效
				setTimeout(() => {
					search(table);
				}, 100);

			}
		});
		// 敲回车就搜索
		$("[name=student-name]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=student-name]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=student-name]").val('');
					$(this).hide();
					// 重置搜索结果
					search(table);
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			search(table);
		});

		// 导出数据
		$("#export").click(function() {
			var studentName = $("[name=student-name]").val();
			var gradeId = $("#div-grade .active").data("id");
			var classId = $("#div-normal-class .active").data("id");
			var rangeDate = $("#work-calendar").val();
			var way = $("#div-way .active").data("value");
			if(rangeDate) {
				var arr = rangeDate.split(' - ');
				var begindate = arr[0];
				var enddate = arr[1];  
			}  else {
				var begindate = '';
				var enddate = '';  
			}
			$url = "<?=admin_url('school/export_charge_pay?')?>";
			$queryStr = '';
			$queryArr = [];
			$str = '';
			if(studentName) {
				$str = "keyword=" + studentName;
				$queryArr.push($str);
			}
			if(gradeId) {
				$str = "gradeId=" + gradeId;
				$queryArr.push($str);
			}
			if(classId) {
				$str = "classId=" + classId;
				$queryArr.push($str);
			}
			if(way) {
				$str = "way=" + way;
				$queryArr.push($str);
			}
			if(rangeDate) {
				if(begindate) {
					$str = "begindate=" + begindate;
					$queryArr.push($str);
				}
				if(enddate) {
					$str = "enddate=" + enddate;
					$queryArr.push($str);
				}
			}
			$queryStr = $queryArr.join("&");
			// console.log($queryStr);return;
			window.location.href  = $url + $queryStr;
		});
	})

	//获取当天日期
	function getNowDate() {
        var date = new Date();
        $res = formatDate(date);
        return $res;
    }
    function getBeforeSevenDate() {
        var date = new Date(); //获取今天日期
        date.setDate(date.getDate() - 6);
        $res = formatDate(date);
        return $res;
    }
    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var dateFormat = year + "-" + month + "-" + day;
        return dateFormat;
	}
	function  getDaysBetween(dateString1, dateString2){
		var  startDate = Date.parse(dateString1);
		var  endDate = Date.parse(dateString2);
		var days = (endDate - startDate)/(1*24*60*60*1000) + 1;
		// alert(days);
		return days;
	}
	// 筛选
	function search(table) {
		var studentName = $("[name=student-name]").val();
		// alert(studentName);
		var gradeId = $("#div-grade .active").data("id");
		var classId = $("#div-normal-class .active").data("id");
		var rangeDate = $("#work-calendar").val();
		var way = $("#div-way .active").data("value");
		if(rangeDate) {
			var arr = rangeDate.split(' - ');
			var begindate = arr[0];
			var enddate = arr[1];  
		}  else {
			var begindate = '';
			var enddate = '';  
		}
		// 筛选班级
		table.setAjaxData({
			'keyword': studentName,
			"classId": classId,
			"gradeId": gradeId,
			"begindate": begindate,
			"enddate": enddate,
			"way": way
		});

		// 更改合计
		$params = {
			'keyword': studentName,
			"classId": classId,
			"gradeId": gradeId,
			"begindate": begindate,
			"enddate": enddate,
			"way": way
		};
		$url = "<?= admin_url('school/get_charge_pay_total') ?>";
		ajax_get($url, $params, function(res) {
			var total = res.data;
			$(".total > span").text(total);
		});
	}
</script>